<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    
    <!-- 订单详情 -->
    <view class="order-details">
      <view class="detail-item">
        <text class="label">有效时间</text>
        <text class="value">48小时</text>
      </view>
      <view class="detail-item">
        <text class="label">申请数量</text>
        <text class="value">x 1</text>
      </view>
      <view class="detail-item">
        <text class="label">医生回复上限</text>
        <text class="value">10条</text>
      </view>
      <view class="detail-item price-item">
        <text class="label">需支付问诊计费</text>
        <text class="value price">¥ {{ consultationPrice.toFixed(2) }}</text>
      </view>
    </view>
    
    <!-- 协议同意 -->
   <view class="agreement-section">
      <van-checkbox 
        v-model="agreedToTerms" 
        shape="circle"
        class="agreement-checkbox"
      />
      <text class="agreement-text">
        请仔细阅读并同意
        <text class="link-text">《四川大学华西医院互联网医院在线门诊患者知情同意书》</text>
      </text>
    </view>
    
    <!-- 底部操作栏   :disabled="!agreedToTerms"-->
    <view class="bottom-action">
      <view class="total-price">
        <text class="price-label">合计:</text>
        <text class="price-value">¥ {{ consultationPrice.toFixed(2) }}</text>
      </view>
      <van-button 
        type="primary" 
        size="large"
       
        @click="selectPatient"
        class="select-patient-btn"
      >
        去选择问诊人
      </van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const doctorId = ref('')
const doctorName = ref('')
const departmentName = ref('')
const consultationPrice = ref(0)
const agreedToTerms = ref(false)

// 选择问诊人
const selectPatient = () => {
  // if (!agreedToTerms.value) {
  //   uni.showToast({
  //     title: '请先同意协议',
  //     icon: 'none'
  //   })
  //   return
  // }
  
  console.log('选择问诊人')
  
  // 跳转到就诊卡选择页面
  const url = `/pages/appointment/medical-card-select?doctorId=${doctorId.value}&doctorName=${doctorName.value}&departmentName=${departmentName.value}&consultationPrice=${consultationPrice.value}&type=consultation`
  console.log('跳转URL:', url)
  
  uni.navigateTo({
    url: url
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onLoad((options: Record<string, string>) => {
  console.log('确认订单页面 onLoad', options)
  
  doctorId.value = options.doctorId || ''
  doctorName.value = options.doctorName || ''
  departmentName.value = options.departmentName || ''
  consultationPrice.value = parseFloat(options.consultationPrice || '0')
  
  console.log('接收到的参数:', {
    doctorId: doctorId.value,
    doctorName: doctorName.value,
    departmentName: departmentName.value,
    consultationPrice: consultationPrice.value
  })
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.order-details {
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.price-item {
    border-top: 1rpx solid #f0f0f0;
    margin-top: 20rpx;
    padding-top: 20rpx;
  }
}

.label {
  font-size: 28rpx;
  color: #333;
}

.value {
  font-size: 28rpx;
  color: #666;
  
  &.price {
    color: #ff4757;
    font-weight: bold;
    font-size: 32rpx;
  }
}

.agreement-section {
  display: flex;
  align-items: flex-start;
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  gap: 20rpx;
}

.agreement-checkbox {
  flex-shrink: 0;
  margin-top: 4rpx;
}

.agreement-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  flex: 1;
}

.link-text {
  color: #07c160;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: white;
  border-top: 1rpx solid #f0f0f0;
}

.total-price {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.price-label {
  font-size: 28rpx;
  color: #333;
}

.price-value {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: bold;
}

.select-patient-btn {
  background: #07c160;
  border: none;
  border-radius: 25rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: bold;
  min-width: 300rpx;
  
  &:disabled {
    background: #ccc;
  }
}
</style>
